<script setup>
import {ref, onMounted} from "vue"
const dialogVerifyPhoneShow = ref(false)
const DialogVerifyNewPhoneShow = ref(false)
import {useUser} from "@/store/useUser";

const userStore = useUser()

const phone = ref('')
onMounted(()=>{
  phone.value = userStore.getUserInfo.phonenumber
})

const changePhone = ()=>{
	dialogVerifyPhoneShow.value = true
}
const changeNext = ()=>{
	dialogVerifyPhoneShow.value = false
	DialogVerifyNewPhoneShow.value = true
}


</script>

<template>
	<div class="acc-info">
		<div class="nickname">
			<span class="label">手机号</span>
			<div>
				<input type="text" v-model="phone" disabled placeholder="请输入更换手机号">
				<button @click="changePhone">更换手机号</button>
			</div>
		</div>
		<p class="title">注销帐号</p>
		<p class="tips">用户根据需要，注销后账号所有数据将被销毀并不可找回，请谨慎操作。</p>
		<span class="save del">注销账号</span>
	</div>
	<DialogVerifyPhone v-if="dialogVerifyPhoneShow" @close="dialogVerifyPhoneShow=false" @confirm="changeNext"/>
	<DialogVerifyNewPhone v-if="DialogVerifyNewPhoneShow" @close="DialogVerifyNewPhoneShow=false"/>
</template>

<style scoped lang="scss">
.acc-info{
	padding: 24px 24px 150px;
}
.title{
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 4px;
}
.tips{
	font-size: 12px;
	color: rgba(25,30,40,0.36);
	margin-bottom: 20px;
}
.head{
	display: flex;
	align-items: center;
	margin-bottom: 40px;
	img{
		width: 80px;
		height: 80px;
		margin-right: 10px;
	}
	button{
		width: 92px;
		height: 42px;
		background: #F9FAFB;
		border-radius: 6px 6px 6px 6px;
		position: relative;
		border: none;
		color: #191E28;
		input{
			position: absolute;
			opacity: 0;
			left: 0;
			top:0;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
	}
}
.nickname{
	display: flex;
	flex-direction: column;
	margin-bottom: 36px;
	.label{
		color: rgba(25, 30, 40, 1);
		font-size: 16px;
		margin-bottom: 12px;
		span{
			color: #FF4F4F;
		}
	}
	&>div{
		display: flex;
	}
	input{
		width: 324px;
		height: 48px;
		border-radius: 8px 8px 8px 8px;
		border: 1px solid rgba(25,30,40,0.08);
		padding: 0 12px;
		outline: none;
		margin-right: 12px;
	}
	button{
		width: 92px;
		height: 48px;
		cursor: pointer;
		background: #F9FAFB;
		border-radius: 6px 6px 6px 6px;
		position: relative;
		border: none;
		color: #191E28;
		&:hover{
			background: #eeeeef;
		}
	}
}
.save{
	display: block;
	width: 160px;
	height: 48px;
	background: #1DBF73;
	border-radius: 8px 8px 8px 8px;
	color: #fff;
	cursor: pointer;
	line-height: 48px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	&.del{
		width: 104px;
		color: #FF4F4F;
		border: 1px solid #FF4F4F;
		background: #fff;
		font-size: 14px;
	}
}
</style>